import Header from '@/components/Header/Header';
import { useEffect, useRef } from 'react';
import { Outlet } from 'react-router-dom';
import './App.less';
import { useNavigate, useLocation } from 'react-router-dom';

export default function App() {
  const chartRef = useRef<HTMLDivElement>(null);

  const getScale = () => {
    let w = 1600;
    let h = 800;
    const ww = window.innerWidth / w;
    const wh = window.innerHeight / h;
    return ww < wh ? ww : wh;
  };

  const tran = () => {
    if (chartRef.current) {
      chartRef.current.style.transform = `scale(${getScale()}) translate(-50%,-50%)`;
    }
  };

  const navigate = useNavigate()
  const location = useLocation();

  useEffect(() => {
    tran();
    window.addEventListener('resize', tran);
    return () => {
      window.removeEventListener('resize', tran);
    };
  }, []);

  useEffect(() => {
    location.pathname === '/' && navigate('/login')
  }, [location]); // 依赖项中包含location，以确保路由变化时effect重新执行

  return (
    <div className="app-box light">
      <div>
        <Header></Header>
        <Outlet />
      </div>
    </div>
  );
}
